import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './articleAdd.css'
import { defineMessages, intlShape, injectIntl } from 'react-intl'
import { Link } from 'react-router'
import ConfirmBox from '../confirmBox/confirmBox'

const messages = defineMessages({
  'submitQuestion': {
    id: 'submitQuestion',
    defaultMessage: '发布问题'
  },
  'questionTitle': {
    id: 'questionTitle',
    defaultMessage: '标题：（50字以内的中文、英文或数字）'
  },
  'titlePlaceholder': {
    id: 'titlePlaceholder',
    defaultMessage: '请输入问题标题'
  },
  'questionDescription': {
    id: 'questionDescription',
    defaultMessage: '描述：（200字以内）'
  },
  'descrptionPlaceholder': {
    id: 'descrptionPlaceholder',
    defaultMessage: '请输入问题描述'
  },
  'submitConfirm': {
    id: 'submitConfirm',
    defaultMessage: '是否确认提交问题'
  },
  'submit': {
    id: 'submit',
    defaultMessage: '提交'
  },
  'cancel': {
    id: 'cancel',
    defaultMessage: '取消'
  }
})

@injectIntl
@CSSModules(styles, { allowMultiple: true })
export default class SubmitQuestion extends React.Component {
  static propTypes = {
    intl: intlShape.isRequired,
    articleAdd: React.PropTypes.func.isRequired,
    push: React.PropTypes.func.isRequired
  }
  constructor(props) {
    super(props)
    this.state = {
      title: '',
      description: '',
      date: Date.now(),
      auther: '张飞',
      showConfirmBox: false
    }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.closeConfirmBox = this.closeConfirmBox.bind(this)
    this.showConfirmBox = this.showConfirmBox.bind(this)
    this.goHome = this.goHome.bind(this)
  }
  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  handleSubmit() {
    const { title, description } = this.state
    if (title && description && this.filterSqlStr(title) && this.filterSqlStr(description)) {
      this.props.articleAdd(this.state).then(this.goHome)
    }
  }
  closeConfirmBox() {
    this.setState({
      showConfirmBox: false
    })
  }
  showConfirmBox() {
    this.setState({
      showConfirmBox: true
    })
  }
  goHome() {
    this.props.push('/')
  }
  filterSqlStr(value) {
    let str = "delete,exec,insert,select,union,update,count,*,',join,>,<"
    let sqlStr = str.split(',')
    let flag = true
    for (var i = 0; i < sqlStr.length; i++) {
      if (value.toLowerCase().indexOf(sqlStr[i]) !== -1) {
        alert('非法字符:' + sqlStr[i])
        flag = false
        break
      }
    }
    return flag
  }
  render() {
    const { formatMessage } = this.props.intl
    return (
      <div>
        <div styleName='question-title'>
          <Link styleName='back' to='/'>返回</Link>
          {formatMessage(messages.submitQuestion)}
          <button type='button' styleName='submit_btn' disabled={!this.state.description && !this.state.title} onClick={this.showConfirmBox}>{formatMessage(messages.submit)}</button>
        </div>
        <form styleName='smart-green'>
          <label>
            <span>{formatMessage(messages.questionTitle)}:</span>
            <input id='title' type='text' name='title' placeholder={formatMessage(messages.titlePlaceholder)} onChange={this.handleChange} />
          </label>
          <label>
            <span>{formatMessage(messages.questionDescription)}:</span>
            <textarea id='description' name='description' placeholder={formatMessage(messages.descrptionPlaceholder)} onChange={this.handleChange} />
          </label>
          <div>
            <input type='button' styleName='button' disabled={!this.state.description && !this.state.title} value={formatMessage(messages.submit)} onClick={this.handleSubmit} />
            <input type='button' styleName='button cancel' value={formatMessage(messages.cancel)} onClick={this.goHome} />
          </div>
          <ConfirmBox intl={this.props.intl}
            onConfirm={this.handleSubmit}
            onCancelConfirm={this.closeConfirmBox}
            show={this.state.showConfirmBox}
            comfirmTips={formatMessage(messages.submitConfirm)} />
        </form>
      </div>
    )
  }
}
